<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>扫码</title>
    <style>
        html,
        body,
        .container {
            margin: 0;
            padding: 0;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: #000000;
        }
    </style>
</head>

<body>
    <div id="scan" class="container">
    </div>
    <script>
        var scan;
        var lightImg;
        var lightView;
        var back = function () {
            lightImg && lightImg.clear();
            lightView && lightView.clear();
            scan && scan.close();
            var webview = plus.webview.currentWebview();
            if (webview.__uniapp_dark) {
                plus.navigator.setStatusBarStyle('dark');
            }
            webview.close('auto');
        }
        /**
         * 绘制照亮开关
         */
        function drawLight() {
            var offImg =
                '';
            var onImg =
                '';
            var onText = '轻触照亮';
            var offText = '轻触关闭';
            var on = false;
            var viewWidth = 48;
            var fontSize = 12;
            var imgWidth = 30;

            function changeType() {
                lightView.reset();
                lightImg.loadBase64Data(on ? onImg : offImg, function () {
                    lightView.drawBitmap(lightImg, {}, {
                        top: 0,
                        left: (viewWidth - imgWidth) / 2 + 'px',
                        width: imgWidth + 'px',
                        height: imgWidth + 'px'
                    });
                });
                lightView.drawText(on ? offText : onText, {
                    top: imgWidth + 'px',
                    left: '0px',
                    width: '100%',
                    height: fontSize + 'px'
                }, {
                    color: '#ffffff',
                    size: fontSize + 'px'
                });
                scan.setFlash(on);
                on = !on;
            }
            lightImg = new plus.nativeObj.Bitmap('lightImg');
            lightView = new plus.nativeObj.View('lightView', {
                width: viewWidth + 'px',
                height: viewWidth + 'px',
                top: window.innerHeight / 2 + 50 + 'px',
                left: (window.innerWidth - viewWidth) / 2 + 'px',
                position: 'static'
            });
            lightView.addEventListener('click', function () {
                changeType();
            });
            plus.webview.currentWebview().append(lightView);
            changeType();
        }
        document.addEventListener('plusready', function () {
            var serviceWebview = plus.webview.getWebviewById('__W2A_CONTEXT_') || plus.webview.getLaunchWebview();
            plus.key.addEventListener('backbutton', back);
            setTimeout(function () {
                var webview = plus.webview.currentWebview();
                scan = new plus.barcode.Barcode('scan', webview.__uniapp_scan_type);
                scan.onmarked = function (type, code, file) {
                    var res = {
                        type: type,
                        code: code
                    };
                    back()
                    serviceWebview.evalJS('window.__scanCodeCallback__&&__scanCodeCallback__(' +
                        JSON.stringify(res) + ')');
                };
                scan.onerror = function (error) {
                    back()
                    serviceWebview.evalJS(
                        'window.__scanCodeCallback__&&__scanCodeCallback__(false)');
                };

                scan.start();
                drawLight();
            }, 500)
        })
    </script>
</body>

</html>
